<!-- 要实现这个程序就得先考虑清楚客户端和服务器之间如何进行交互,也就是约定好前后端交互的接口(自制定应用层协议).既然是搞了一个服务器,服务器就得提供一些服务,具体是啥样的服务,以及这些服务应该怎样触发都需要考虑
    那么对于表白墙来说就主要提供了两个接口:1.当用户点击提交的时候,就会给服务器发送一个HTTP请求,让服务器把这个消息保存下来(告诉服务器当前存储另一条怎样的数据)
    因此就需要对请求和响应做出约定:(客户端发送一个啥样的HTTP请求,服务器放回一个啥样的HTTP响应)
    请求:(这里的请求可以有无数种(方法,路劲,名称都可以变化),只要能确定下来一种并且严格执行这样的约定就可以,这也就是约定前后端接口的意义,这也就是自定义协议(约束程序员不能随便写代码))
    POST  /message
    {
        from: "张三",
        to: "小花",
        message: "blue"
    }
    响应:
    HTTP1.1 200 ok
    {
        ok: true
    }


    2.当页面加载就需要从服务器获取到曾经存储的消息内容(从服务器获取到当前有哪些留言)
    请求:
    GET /message
    响应:
    HTTP1.1 200 OK
    Contexnt-Type: application/json
    //由于返回的内容可能不止一组,因此这里使用数组来对其进行组织(JSON格式的数组,每一个都是JSON对象)
    [
        {
            from: "张三",
            to: "小花",
            message: "blue"
        },
        {
            from: "张三",
            to: "小花",
            message: "blue"
        },{
            from: "张三",
            to: "小花",
            message: "blue"
        },{
            from: "张三",
            to: "小花",
            message: "blue"
        },
    ]
    完成这些之后,就需要来进行后端代码的编写了
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        body{
            background-image: url(./R-C.jpg);
            background-size: cover; 
        }
        .container{
            width: 100%;
        }
        h3{
            font-size: 25px;
            text-align: center;
            padding: 30px 0;
        }
        p{
            font-size: 15px;
            color: #999;
            text-align: center;
            padding: 10px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            padding: 10px 0;
            /*元素居中  */
            margin: 0 auto;
            /* 弹性布局 全部居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;            

            font-size: 20px;
        }
        .row input{
            font-size: 20px;
            width: 300px;
            height: 40px;

            line-height: 40px;
            /* 输入框的开始间隔 */
            text-indent: 0.5em;
            /* 去掉输入框的轮廓线 */
            outline: none;
        }
        .row #btn{
            width: 300px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            /* 圆角 */
            border-radius: 10px;
            
        }
        /* 伪类选择器  点击触发*/
        .row #btn:active{
            background-color: gray;
        }
    </style>
    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交,会将信息显示在表格中</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div><div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="btn">提交</button>
        </div>
    </div>
    <!--  -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //当用户点击按钮就会获取到input中的内容,然后把内容构造成一个div打印到下面

        //获取消息列表 设置一个函数来获取消息列表:
        function getMessages(){
                $.ajax({
                    type: "get",
                    url: "message",
                    success: function(body){
                        //此时body已经是一个js对象数组了,jquery ajax就会根据响应的content type来自动进行解析,如果服务器返回的content type已经是application/json了,那么就会自动把body转换成js对象了
                        //而客户端没有自己转,这里也是可以通过JSON.parse()这个函数来进行手动转换的

                        //接下来通过遍历body来获取数组中的每个元素
                        let container = document.querySelector('.container');
                        for(let message of body){
                            let newDiv = document.createElement('div');
                            //这里就需要获取所得对象的属性了
                            newDiv.innerHTML = message.from + "对" + message.to + "说:" + message.message;
                            // 再使用下上面已经写好的样式
                            newDiv.className = 'row';
                            //放到一个父节点里面
                            container.appendChild(newDiv);
                        }
                        

                    }
                });
        }
        getMessages();


        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            //获取所有的输入内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == ''){
                //用户还没写完
                return;
            }
            //添加一个新的节点
            let newDiv = document.createElement('div');
            newDiv.innerHTML = from + "对" + to + "说:" + msg;
            // 再使用下上面已经写好的样式
            newDiv.className = 'row';
            //放到一个父节点里面
            let container = document.querySelector('.container');
            container.appendChild(newDiv);

            //3.清空之前的内容
            for(let i = 0;i < inputs.length;i ++){
                inputs[i].value = '';
            }
            

            //前面写的都是通过div.row来保存的信息,而这些内容是挂在dom树上的,就是在内存中,很容易丢失,一旦页面刷新/关闭,数据也就没了
            //而想要保存这些内容有以下解决方案:
            //1/可以把提交的数据,保存在浏览器本地,(浏览器提供了localStorge/indexDB这样的机制,能够实现本地存储)本质上,是通过浏览器把呀存储的数据存到了当前电脑的磁盘上
            //但是这样的问题只有自己在当前电脑上才能看到
            //2.可以把提交的数据通过网络通信传输给服务器,由服务器进行保存1)服务器保存在内存中(电脑一关也就没了所以还是后面的可行)2)服务器保存在文件中3)服务器保存在数据库中

            //4.发送请求: 此时再把输入框的内容,构造成一个HTTP请求,通过ajax发送给服务器
            let body = {
                from: from,
                to: to,
                message: msg
                //js中的key是可以带双引号,也可以不带双引号的,但是key中带有空格或者减号的话,一定要带双引号
            };
            $.ajax({
                type: "post",
                url: "message",
                contentType: "application/json;charset=utf8",
                data: JSON.stringify(body),
                success: function(body) {
                    alert("消息提交成功!");
                    
                },
                error: function() {
                    alert("消息提交失败!")
                    
                }

            });
                
                

            
        }

    </script>
</body>
</html>